const e = `<!--
 * @Description: 表单验证
-->
<template>
  <div class="default-form" :style="{ width: '50rem' }">
    <s-form
      ref="exampleForm"
      :form-data="formData"
      :form-rules="formRules"
      label-width="6em"
      colon="："
    >
      <s-form-item name="name" label="姓名" required>
        <s-input
          v-model="formData.name"
          width="32rem"
          placeholder="请输入姓名"
          :maxlength="8"
        ></s-input>
      </s-form-item>
      <s-form-item name="sex" label="性别" required>
        <s-radio-group v-model="formData.sex" :options="radioList"></s-radio-group>
      </s-form-item>
      <s-form-item name="hobby" label="爱好">
        <s-checkbox-group v-model="formData.hobby" :options="checkboxList"></s-checkbox-group>
      </s-form-item>
      <s-form-item name="introduction" label="自我介绍">
        <s-textarea
          v-model="formData.introduction"
          width="32rem"
          :rows="5"
          placeholder="请简要的介绍一下自己"
          :maxlength="200"
        ></s-textarea>
      </s-form-item>
      <s-form-item>
        <s-button theme="primary" @click="validateForm">验证表单</s-button>
      </s-form-item>
    </s-form>
  </div>
</template>

<script lang="ts">
import { Form, type FormInstance, type FormRules, MessageCommand } from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "DefaultForm",
})
export default class DefaultForm extends Vue {
  $refs!: {
    exampleForm?: FormInstance; // 案例表单
  };

  // 加载
  loading = false;
  // 单选数据
  radioList = [
    { label: "男", value: 0 },
    { label: "女", value: 1 },
  ];
  // 多选数据
  checkboxList = [
    { label: "运动", value: 0 },
    { label: "旅游", value: 1 },
    { label: "游戏", value: 2 },
    { label: "电影", value: 3 },
    { label: "音乐", value: 4 },
    { label: "社交", value: 5 },
  ];
  // 个人信息表单
  formData = {
    name: null,
    sex: null,
    hobby: [],
    introduction: null,
  };
  // 表单的验证规则
  formRules: FormRules<typeof this.formData> = {
    name: [
      { required: true, trigger: "change", message: "姓名为必填项" },
      {
        trigger: "change",
        reg: /^(.){2,8}$/,
        message: "姓名由 2-8 位构成",
      },
    ],
    sex: [{ required: true, trigger: "change", message: "性别为必填项" }],
  };

  /**
   * @description: 表单验证
   * @returns
   */
  validateForm(): void {
    const { exampleForm } = this.$refs;
    if (exampleForm instanceof Form) {
      exampleForm
        .validate()
        .then(() => {
          MessageCommand.success("验证成功");
        })
        .catch((e) => {
          MessageCommand.error(e.message);
          throw e;
        });
    }
  }
}
<\/script>
`; export { e as default };
